<template>
  <div class="my-border">
    <el-card class="stats-card" style="height: 140px;"> <!-- 减小卡片的上下长度 -->
      <div class="stats-row">
        <div class="stats-item">
          <p class="stats-label">已提交反馈总数</p>
          <p class="stats-value">{{totalFeekback}}</p>
        </div>
        <div class="stats-dotted-line"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">反馈活动总数</p>
          <p class="stats-value">{{numOfACTinFeekback}}</p>
        </div>
        <div class="stats-dotted-line2"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">未查看</p>
          <p class="stats-value">{{uncheckedFeekback}}</p>
        </div>
        <div class="stats-dotted-line3"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">已查看</p>
          <p class="stats-value">{{checkedFeekback}}</p>
        </div>
      </div>
    </el-card>
    <el-select v-model="selectedAName"
               clearable placeholder="选择活动" class="my-button2" @change="filterFeekback">
      <el-option
          v-for="item in name2"
          :key="item.name"
          :value="item.name"
      ></el-option>
    </el-select>
    <el-select v-model="selectedName"
               clearable placeholder="选择反馈人" class="my-button" @change="filterFeekback">
      <el-option
          v-for="item in name1"
          :key="item.name"
          :value="item.name"
      ></el-option>
    </el-select>
    <el-select v-model="selectedStatus" clearable
               placeholder="选择查看状态" class="my-button" @change="filterFeekback">
      <el-option
          v-for="status in statuses"
          :key="status.value"
          :label="status.label"
          :value="status.value"
      ></el-option>
    </el-select>
    <el-button class="refresh" @click="reload1" style="margin-left: 10px" type="primary">重置</el-button>
    <span v-show="!this.page" style="float: right; margin-top: 26px">{{"共"+this.tableData.length+"条"}}</span>
    <el-table :data="tableData"
              tooltip-effect="dark"
              style="width: 100%; margin-top: 10px">
      <el-table-column prop="id"    label="反馈id" v-if="false"></el-table-column>
      <el-table-column fixed    prop="createTime"    label="反馈创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime.substring(0, 10)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="aid"    label="反馈活动id" v-if="false"></el-table-column>
      <el-table-column prop="aname"    label="反馈活动名称">
        <template slot-scope="scope">
          <span v-if="activities.length>0">{{getActivityName(scope.row.aid)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈内容" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-html="scope.row.description"></div>
        </template>
      </el-table-column>
      <el-table-column prop="status"    label="反馈查看状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="font-size: 15px;">未查看</span>
          <span v-else-if="scope.row.status==1" style="font-size: 15px;">已查看</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"   label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==0" @click="Open(scope.row.id)" type="text" size="medium" >查看详情</el-button>
          <el-button v-if="scope.row.status==1" @click="handleOpen(scope.row.id)" type="text" size="medium" >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style=""
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="params.page"
                   :page-sizes="pageSizes"
                   :page-size="params.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="params.total"
                   v-if="this.page">
    </el-pagination>

    <el-dialog
        title="反馈详情查看"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="反馈人账号" >{{this.feekback.uid}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈人" >{{this.name}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈ID" >{{this.feekback.id}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈创建时间">
          {{this.feekback.createTime.substring(0,10)}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈活动id">{{this.feekback.aid}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈活动名称">{{this.activity.name}}</el-descriptions-item><br>
        <el-descriptions-item label="活动类型">
          <template>
            <span v-if="this.activity.type==0" style="font-size: 15px;">线上活动</span>
            <span v-else-if="this.activity.type==1" style="font-size: 15px;">校内活动</span>
            <span v-else-if="this.activity.type==2" style="font-size: 15px;">校外活动</span>
          </template>
        </el-descriptions-item><br>
        <el-descriptions-item label="反馈查看状态">
          <template>
            <span v-if="this.feekback.status==0" style="font-size: 15px;">未查看</span>
            <span v-else-if="this.feekback.status==1" style="font-size: 15px;">已查看</span>
          </template>
        </el-descriptions-item><br>
        <el-descriptions-item label="反馈描述">
          <div v-html="this.feekback.description"></div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" class="form" border>
        <el-descriptions-item label="反馈附件" >
          <img v-for="(url, index) in selectFile" :key="index"
               :src="url.url" style="width: auto;max-height: 200px">
        </el-descriptions-item><br>
      </el-descriptions>
      <el-button v-if="this.feekback.status==0" type="primary" class="my" @click="updateStatus">确 定</el-button>
      <el-button v-if="this.feekback.status==1"
                 type="primary" class="my" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAct,
  getAllActivity1,
  getAllByPage, getAllFeekback,
  getFeekbackById,
  getUser1, searchByStatus1,
  updateStatus1, getDistName, getDistName1, getNameByUid, getNameByAid, selectFeedFile
} from '../../../../api/feekback'
import {mapGetters} from 'vuex'

export default {
  inject: ['reload'],
  name: 'allfeekbacks',
  data () {
    return {
      params: {
        page: 1,
        size: 5,
        total: 100
      },
      pageSizes: [5, 8, 10, 20],
      tableData: [],
      activities: [],
      feekback: {
        id: '',
        createTime: '',
        uid: '',
        description: '',
        status: '',
        aid: ''
      },
      account: '',
      name: '',
      activity: {
        name: '',
        type: ''
      },
      fid: '',
      dialogVisible: false,
      selectedStatus: '',
      selectedName: '',
      selectedAName: '',
      methodSelect: 1,
      feekbackList: [],
      feekbackList1: [],
      name1: [],
      name2: [],
      page: true,
      selectFile: []
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.params.size = val
      if (this.methodSelect === 1) {
        this.findAllByPage()
      } else {
        this.search()
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      if (this.methodSelect === 1) {
        this.findAllByPage()
      } else {
        this.search()
      }
    },
    getActivityName (aid) {
      const activity = this.activities.find(activity => activity.id === aid)
      return activity ? activity.name : ''
    },
    findAllByPage () {
      this.page = true
      getAllByPage(this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.params.total = res.total
      })
    },
    // 分页获取所有0，1反馈
    getAllActivity () {
      getAllActivity1().then((res) => {
        this.activities = res
      })
    },
    handleClose () {
      this.dialogVisible = false
    },
    Open (id) {
      this.$confirm('此操作将修改状态为已查看, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.handleOpen(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleOpen (id) {
      this.dialogVisible = true
      this.fid = id
      getFeekbackById(id).then((res) => {
        this.feekback.id = res.id
        this.feekback.aid = res.aid
        this.feekback.uid = res.uid
        this.feekback.status = res.status
        this.feekback.createTime = res.createTime
        this.feekback.description = res.description
        selectFeedFile(this.fid, res.uid).then((res) => {
          this.selectFile = res
        })
      })
      getUser1(id).then((res) => {
        this.name = res.name
        this.account = res.account
      })
      getAct(id).then((res) => {
        this.activity.name = res.name
        this.activity.type = res.type
      })
    },
    updateStatus () {
      updateStatus1(this.fid)
      this.dialogVisible = false
      this.reload()
    },
    search () {
      this.methodSelect = 0
      searchByStatus1(this.selectedStatus, this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.params.total = res.total
      })
    },
    reload1 () {
      this.reload()
    },
    getAllFeekback () {
      let feekback1 = []
      getAllFeekback().then((res) => {
        const promises = res.map((item) => {
          return getNameByUid(item.uid).then((name) => {
            item.uname = name
            return item
          })
        })
        return Promise.all(promises)
      }).then((updatedres) => {
        feekback1 = updatedres
        const actPromises = feekback1.map((item) => {
          return getNameByAid(item.aid).then((aname) => {
            item.aname = aname
            return item
          })
        })
        return Promise.all(actPromises)
      }).then((lastList) => {
        this.feekbackList = lastList
      })
    },
    // 获取所有0，1反馈
    getName () {
      getDistName().then((res) => {
        this.name1 = res
      }).catch(() => {
        console.log('数据库无数据')
      })
    },
    // 查到的写了反馈的用户
    getName1 () {
      getDistName1().then((res) => {
        this.name2 = res
      }).catch(() => {
        console.log('数据库无数据')
      })
    },
    // 查到的有反馈的活动
    filterFeekback () {
      this.page = false
      this.feekbackList1 = this.feekbackList
      let filteredActivities = this.feekbackList1
      if (this.selectedAName) {
        console.log(this.selectedAName)
        filteredActivities = filteredActivities.filter(feekback => feekback.aname === this.selectedAName)
      }
      if (this.selectedName) {
        filteredActivities = filteredActivities.filter(feekback => feekback.uname === this.selectedName)
      }
      if (this.selectedStatus) {
        const selectedTypeInt = Number(this.selectedStatus)
        filteredActivities = filteredActivities.filter(feekback => feekback.status === selectedTypeInt)
      }
      if ((!this.selectedAName) && (!this.selectedName) && (!this.selectedStatus)) {
        this.findAllByPage()
        return
      }
      this.tableData = filteredActivities
    }
  },
  computed: {
    ...mapGetters({
      userType: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    }),
    roleName () {
      return this.getRoleName(this.userType)
    },
    statuses () {
      return [
        {value: '0', label: '未查看'},
        {value: '1', label: '已查看'}
      ]
    },
    totalFeekback () {
      return this.feekbackList.length
    },
    checkedFeekback () {
      return this.feekbackList.filter(data => data.status === 1).length
    },
    uncheckedFeekback () {
      return this.feekbackList.filter(data => data.status === 0).length
    },
    numOfACTinFeekback () {
      let lists = this.feekbackList
      let property = new Set()
      for (let i = 0; i < lists.length; i++) {
        let list = lists[i]
        if (list.hasOwnProperty('aid')) {
          property.add(list['aid'])
        }
      }
      return property.size
    }
  },
  mounted () {
    this.findAllByPage()
    this.getAllFeekback()
    this.getAllActivity()
    this.getName()
    this.getName1()
  }
}
</script>

<style scoped>
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.my {
  margin-top: 20px;
}
.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px; /* 减小卡片的上下长度 */
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 200px; /* 调整字段之间的间距 */
  position: relative;
}

.stats-item {
  text-align: center;
}

/* 新增样式用于虚线 */
.stats-dotted-line {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(20% + 43px); /* 将虚线置于两字段之间的中间位置 */
}

.stats-dotted-line2 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(50% + 63px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-dotted-line3 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(80% + 43px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px; /* 调整字段与数字之间的间距 */
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
}
.my-button2 {
  margin-top: 15px;
}
.my-button {
  margin-top: 15px;
  margin-left: 15px;
}
.my-border {
  padding: 10px;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
